<!--
Date: 2025-08-13
Copyright (c) 2025 CAX Conversion Project
-->
<template>
  <div class="main">
    <div class="business_list" v-show="!detailVisible">
      <div class="mb-[10px]">
        <el-card shadow="hover">
          <el-form ref="queryFormRef" :model="queryParams" :inline="true" size="small" label-width="120px">
            <el-form-item label="场景名称" prop="businessName">
              <el-input v-model="queryParams.name" placeholder="请输入" clearable />
            </el-form-item>
            <el-form-item label="创建人" prop="createByName">
              <el-input v-model="queryParams.createByName" placeholder="请输入" clearable />
            </el-form-item>
            <el-form-item style="padding-left: 120px">
              <el-button type="primary" icon="search" @click="doQuery">搜索</el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
      <el-card shadow="hover">
        <template #header>
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button size="small" type="primary" plain icon="Plus" @click="handleVisible('add', null)">新增</el-button>
            </el-col>
          </el-row>
        </template>

        <el-table v-loading="loading" :data="businessList">
          <el-table-column :label="item.label" v-for="item in defaultColunms" :key="item.label" :prop="item.prop" :fixed="item.fixed" />
          <el-table-column :label="item.label" v-for="item in cutColunms" :key="item.label" :prop="item.prop" />
          <el-table-column label="操作" width="210" fixed="right">
            <template #default="scope">
              <div>
                <el-button size="small" link type="primary" icon="Document" @click="handleVisible('detail', scope.row)">详情</el-button>
                <el-button size="small" link type="primary" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagenation">
          <el-pagination
            v-show="total > 0"
            layout="prev, pager, next,jumper"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            :total="total"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
    </div>
    <BusinessDetail :data="businessData" v-if="detailVisible" @goback="detailVisible = false" />
  </div>
</template>
  <script name="businessManagement" setup>
import BusinessDetail from './BusinessDetail.vue';
import { deleteBusiness, getBusinessList } from '@/api/metaData/index';
const emit = defineEmits(['handleEvent']);
const businessList = ref([]);
const total = ref(0);
const loading = ref(false);
const detailVisible = ref(false);
const businessData = ref(null);
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  name: '',
  createByName: '',
  isAsc: 'descending'
});
const defaultColunms = ref([
  { label: '业务场景名称', prop: 'name', fixed: 'left' },
  { label: '业务场景描述', prop: 'description', fixed: null },
  { label: '创建人', prop: 'createByName', fixed: null },
  { label: '创建时间', prop: 'createTime', fixed: null }
]);
const cutColunms = ref([]);
const handleVisible = (type, data) => {
  businessData.value = null;
  if (type === 'add') {
    emit('handleEvent', { component: 'busines' });
  }
  if (type === 'detail') {
    businessData.value = data;
    detailVisible.value = true;
  }
};
// 删除
const handleDelete = (data) => {
  ElMessageBox.confirm('是否确认删除该项？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    deleteBusiness(data.id).then((res) => {
      ElMessage({ showClose: true, message: '删除成功。', type: 'success' });
      doQuery();
    });
  });
};
const doQuery = () => {
  businessList.value = [];
  loading.value = true;
  getBusinessList(queryParams.value)
    .then((res) => {
      if (res) {
        businessList.value = res?.rows;
        total.value = res?.total || 0;
      }
    })
    .finally(() => {
      loading.value = false;
    });
};
const handleCurrentChange = (num) => {
  queryParams.value.pageNum = num;
  doQuery();
};
onMounted(() => {
  doQuery();
});
const resetQuery = () => {
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
    name: '',
    createByName: '',
    isAsc: 'descending'
  };
  doQuery();
};
</script>
    <style lang="scss" scoped>
.main {
  height: calc(100vh - 84px);
  overflow: auto;
  width: 100%;
}
.business_list {
  height: calc(100vh - 84px);
  overflow: auto;
  width: 100%;
  .pagenation {
    display: flex;
    justify-content: end;
    margin-top: 10px;
  }
}
</style>